import { PropEditor, PropEditorState } from "maishu-jueying";
import React = require("react");
import { createService } from "./base-component";
import { ImageService } from "maishu-services-sdk";
import imageManager from "controls/image-manager";
import * as ui from "maishu-ui-toolkit";

export function checkbox(text: string) {
    return class extends PropEditor<PropEditorState<boolean>, boolean>{
        render() {
            let { value } = this.props;
            return <>
                <input type="checkbox"
                    ref={(e: HTMLInputElement) => {
                        if (!e) return;
                        e.checked = value;
                        e.onchange = () => {
                            this.props.updateComponentProp(e.checked);
                        }
                    }} />
                <span style={{ paddingLeft: 6 }}>{text}</span>
            </>
        }
    }
}

export function toggle(options?: { defaultValue?: boolean }) {
    options = Object.assign({ defaultValue: false } as typeof options, options || {});
    return class extends PropEditor<PropEditorState<boolean>, boolean>{
        render() {
            let { value } = this.props;
            value = value == null ? options.defaultValue : value;
            return <label className="pull-left switch">
                <input type="checkbox" className="ace ace-switch ace-switch-5"
                    checked={value}
                    onChange={e => {
                        this.props.updateComponentProp(e.target.checked);
                    }} />
                <span className="lbl middle"></span>
            </label>
        }
    }
}

export function numberInput() {
    return class extends PropEditor<PropEditorState<number>, number>{
        render() {
            let { value } = this.props;
            return <input className="form-control"
                ref={e => {
                    if (!e) return;
                    e.value = value == null ? "" : `${value}`;
                    e.onchange = event => {
                        let floatRegex = /\-?\d+\.\d+/g;
                        let intRegex = /\-?\d+/g;
                        if (floatRegex.test(e.value)) {
                            value = parseFloat(e.value);
                            this.props.updateComponentProp(value);
                        }
                        else if (intRegex.test(e.value)) {
                            value = parseInt(e.value);
                            this.props.updateComponentProp(value);
                        }

                    }
                }} />
        }
    }
}

export function image(text: string, maxWidth?: number) {
    return class extends PropEditor<PropEditorState<string>, string>{
        imageService: ImageService;
        constructor(props) {
            super(props);
            this.imageService = createService(ImageService);
        }
        render() {
            let imagePath = this.props.value;
            return <img className="img-responsive" title={text} style={{ maxWidth }}
                src={imagePath ? this.imageService.imageSource(imagePath) : null}
                ref={(e: HTMLImageElement) => {
                    if (!e) return;
                    let size = maxWidth || 200;
                    ui.renderImage(e, { imageSize: { width: size, height: size } });
                    e.onclick = () => {
                        imageManager.show((imageIds) => {
                            // store.ImagePath = imageIds[0];
                            // this.setState(this.state);
                            this.props.updateComponentProp(imageIds[0])
                        })
                    }
                }} />
        }
    }
}